<template>
  <div id="cont">
    <Form
      ref="detail"
      :rules="formValidate"
      :label-width="140"
      :model="detail"
      class="tab-detail"
    >
      <Row wrap style="align-items: flex-start;margin-bottom:5px;display:block">
        <Col :lg="8" :xs="24">
          <FormItem prop="image" :label-width="50">
            <div class="detail-image-box">
              <viewer :images="detail.image">
                <img
                  style="max-width:100%;max-height:230px"
                  :src="detail.image"
                  alt=""
                  readonly
                />
              </viewer>
            </div>
          </FormItem>
        </Col>
        <Col :lg="8" :xs="24">
          <FormItem label="编号" prop="sn">
            <Input v-model="detail.sn" readonly />
          </FormItem>
          <FormItem label="型号" prop="model">
            <Input v-model="detail.model" readonly />
          </FormItem>
          <FormItem label="供应商" prop="supplier">
            <Input v-model="detail.supplier" readonly />
          </FormItem>
          <FormItem label="额定功率(kW)" prop="ratedPower">
            <Input
              type="number"
              v-model.number="detail.ratedPower"
              style="width:100%"
              :max="3000"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="最大输入扭矩(Nm)" prop="maxInputTorque">
            <Input
              type="number"
              v-model.number="detail.maxInputTorque"
              style="width:100%"
              :max="5000"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="额定输入转速(rpm)" prop="ratedInputSpeed">
            <Input
              type="number"
              v-model.number="detail.ratedInputSpeed"
              style="width:100%"
              :max="15000"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="主减速比" prop="mainGearRatio">
            <Input
              type="number"
              v-model.number="detail.mainGearRatio"
              style="width:100%"
              :max="100"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="轮边速比" prop="hubGearRatio">
            <Input
              type="number"
              v-model.number="detail.hubGearRatio"
              style="width:100%"
              :max="100"
              :min="0"
              readonly
            />
          </FormItem>
        </Col>
        <Col :lg="8" :xs="24">
          <FormItem label="效率(%)" prop="efficiency">
            <Input
              type="number"
              v-model.number="detail.efficiency"
              style="width:100%"
              :max="100"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="转动惯量(kg*m^2)" prop="inertia">
            <Input
              type="number"
              v-model.number="detail.inertia"
              style="width:100%"
              :max="10"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="扭矩分配比(%)" prop="torqueSplitRatio">
            <Input
              type="number"
              v-model.number="detail.torqueSplitRatio"
              style="width:100%"
              :max="100"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="最高输入转速(rpm)" prop="maxInputSpeed">
            <Input
              type="number"
              v-model.number="detail.maxInputSpeed"
              style="width:100%"
              :max="15000"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="最低输入转速(rpm)" prop="minInputSpeed">
            <Input
              type="number"
              v-model.number="detail.minInputSpeed"
              style="width:100%"
              :max="15000"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="最高输出转速(rpm)" prop="maxOutputSpeed">
            <Input
              type="number"
              v-model.number="detail.maxOutputSpeed"
              style="width:100%"
              :max="15000"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="载重(kg)" prop="load">
            <Input
              type="number"
              v-model.number="detail.load"
              style="width:100%"
              :max="3000"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="重量(kg)" prop="weight">
            <Input
              type="number"
              v-model.number="detail.weight"
              style="width:100%"
              :max="3000"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem :label-width="30">
            其他人是否可见
            <i-switch
              v-model="detail.isIndexShow"
              :true-value="1"
              :false-value="0"
              disabled
            />
            其他人是否可用
            <i-switch
              v-model="detail.otherCanUse"
              :true-value="1"
              :false-value="0"
              disabled
            />
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import { transaxleApi } from "@/api/transaxle";
export default {
  name: "TransaxleDetail",
  components: {},
  props: {
    /* id:{type:String} */
  },
  data() {
    return {
      id: null,

      detail: null, // 发动机详情
      // 表单验证
      formValidate: {
        // 编号
        sn: [{ required: true, message: "请输入编号", trigger: "change" }],
        // 型号
        model: [{ required: true, message: "请输入型号", trigger: "change" }],

        // 额定功率(kW)
        ratedPower: [
          {
            type: "number",
            required: true,
            message: "请输入额定功率(kW)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "change"
          }
        ],
        // 最大输入扭矩(Nm)
        maxInputTorque: [
          {
            type: "number",
            required: true,
            message: "请输入最大输入扭矩(Nm)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 5000,
            message: "请输入0到5000的数字",
            trigger: "change"
          }
        ],
        // 额定输入转速(rpm)
        ratedInputSpeed: [
          {
            type: "number",
            required: true,
            message: "请输入额定输入转速(rpm)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 15000,
            message: "请输入0到15000的数字",
            trigger: "change"
          }
        ],
        // 主减速比
        mainGearRatio: [
          {
            type: "number",
            required: true,
            message: "请输入主减速比",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 100,
            message: "请输入0到100的数字",
            trigger: "change"
          }
        ],
        // 轮边速比
        hubGearRatio: [
          {
            type: "number",
            required: true,
            message: "请输入轮边速比",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 100,
            message: "请输入0到100的数字",
            trigger: "change"
          }
        ],
        // 效率(%)
        efficiency: [
          {
            type: "number",
            required: true,
            message: "请输入效率(%)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 100,
            message: "请输入0到100的数字",
            trigger: "change"
          }
        ],
        inertia: [
          {
            type: "number",
            min: 0,
            max: 10,
            message: "请输入0到10的数字",
            trigger: "change"
          }
        ],
        torqueSplitRatio: [
          {
            type: "number",
            min: 0,
            max: 100,
            message: "请输入0到100的数字",
            trigger: "change"
          }
        ],
        maxInputSpeed: [
          {
            type: "number",
            min: 0,
            max: 15000,
            message: "请输入0到15000的数字",
            trigger: "change"
          }
        ],
        minInputSpeed: [
          {
            type: "number",
            min: 0,
            max: 15000,
            message: "请输入0到15000的数字",
            trigger: "change"
          }
        ],
        maxOutputSpeed: [
          {
            type: "number",
            min: 0,
            max: 15000,
            message: "请输入0到15000的数字",
            trigger: "change"
          }
        ],
        load: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "change"
          }
        ],
        weight: [
          {
            type: "number",
            min: 0,
            max: 3000,
            message: "请输入0到3000的数字",
            trigger: "change"
          }
        ],
        // 图片
        image: [{ required: true, message: "请上传图片", trigger: "change" }]
      }
    };
  },
  watch: {},
  mounted() {
    this.id = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    // 获取发动机详情数据
    getDetail() {
      transaxleApi.getById(this.id).then(res => {
        this.detail = res.data;
      });
    }
  }
};
</script>
<style>
#cont {
  background-color: #fff;
  padding: 30px 30px 0 30px;
}

.tab-detail {
  margin-bottom: 50px;
}
.tab-detail input {
  background-color: #f4f4f4 !important;
}

.tab-detail span {
  color: #000 !important;
}

.tab-detail i {
  display: none !important;
}
.detail-image-box {
  width: 100%;
  margin-bottom: 10px;
  height: 230px;
  border: 1px dashed #dcdee2;
  text-align: center;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}
</style>
